<script setup lang="ts">
const props = defineProps({
    name: {
        type: String,
        default: '确定',
    },
    full: {
        type: Boolean,
        default: false,
    },
    width: {
        type: [Number, String],
        default: '100%',
    },
    height: {
        type: [Number, String],
        default: 84,
    },
    bcColor: {
        type: String,
        default: '#ff7642',
    },
    textColor: {
        type: String,
        default: '#fff',
    },
    textSize: {
        type: [Number, String],
        default: 36,
    },
    rounded: {
        type: Number,
        default: 9999,
    },
    center: {
        type: Boolean,
        default: true,
    },
})

const emit = defineEmits(['click'])

function onClick() {
    emit('click')
}
</script>

<template>
    <view :class="{ '!mx-auto': center }" :style="{ width: (typeof width === 'string') ? width : `${width}rpx` }">
        <view class="box-border w-full flex items-center justify-center px-30rpx"
              :style="{ height: (typeof height === 'string') ? height : `${height}rpx`, background: bcColor, borderRadius: `${rounded}rpx` }"
              @click="onClick">
            <view :style="{ fontSize: `${textSize}rpx`, color: textColor }">
                <slot> {{ name }}</slot>
            </view>
        </view>
    </view>
</template>

<style scoped></style>

<route lang="json">
{
    "layout": "tabbar"
}
</route>
